<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蓄热云</title>
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/basic.css">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
        table tbody {
            display:block;
            height:200px; //高度根据实际自定义
            /*overflow-y:scroll;*/
            /*-webkit-overflow-scrolling: touch; // 为了滚动顺畅*/
        }

        .li1{
            width: 30%;
            color: white;
            text-align: center
        }
        .li2{
            width: 40%;
            color: white;
            text-align: center
        }
        li{
            display: block;
            height: auto;
            list-style-type: none;
            text-align: -webkit-match-parent;
            font-size: 16px;
            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }
        /*.userTable{*/
        /*    overflow:auto*/
        /*}*/

        .bimg{
            background-image: linear-gradient(#19426E, transparent, #19426E)
        }

        .divRoll {
            overflow: hidden;
        }
        .ulRoll {
            list-style: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uxNOfHgG9sm0ysvPxr8IrRNh1mHXj1vr"></script>
</head>
<body class="container-fluid">
<input type="hidden" th:value="${dataArray}" id="dataArray"/>
<div class="row">
    <div class="fl  height100 col-md-4 mt15">
        <div id="time">
            <div class="clock fl">
                <div id="Date" class="mr10"></div>
                <ul>
                    <li id="hours"></li>
                    :
                    <li id="min"></li>
                    :
                    <li id="sec"></li>
                </ul>
            </div>
        </div>

        <img src="../images/borderLeft.png" class="leftBorder width100" style="padding-right: 0 !important;">
    </div>

    <div class="title  col-md-4 mt15">
        <img src="../images/logo.png" class="logo"/>蓄热云—绿色储能 + 清洁供暖生态系统<span th:text="${name}"></span>
    </div>
    <div class="fr  height100 col-md-4 mt15 ">
        <div class="inSystem"><img src="../images/icon.png" class="inSystemImg" /><span id="enter">进入系统</span></div>
        <img src="../images/borderRight.png" class="rightBorder width100">
    </div>
    <div class="col-md-12 titleLine">
        <img src="../images/titleLine.png" class=" width100">
    </div>
    <div class="col-md-12 dataContent">
        <div class="col-md-3">
            <div class="subTitle titleOne">数据概览</div>
            <div class="dataDiv dataOne ">
                <div class="col-md-4 subOne">
                    <div class="subDivTitle">储能总功率</div>
                    <div class="subData" id="subOneData">

                    </div>
                </div>
                <div class="col-md-4 subTwo">
                    <div class="subDivTitle">储能总容量</div>
                    <div class="subData" id="subTwoData">

                    </div>
                </div>
                <div class="col-md-4 subThree">
                    <div class="subDivTitle">供暖总面积</div>
                    <div class="subData" id="subThreeData">

                    </div>
                </div>
                <div class="col-md-4 subFour">
                    <div class="subDivTitle">储能供暖站</div>
                    <div class="subData" id="subFourData">
                    </div>
                </div>
                <div class="col-md-4 subFive">
                    <div class="subDivTitle">储能供热机组</div>
                    <div class="subData" id="subFiveData">

                    </div>
                </div>
            </div>
            <div class="subTitle titleTwo">运维信息</div>
            <div class="dataDiv dataTwo ">
                <div class="col-md-4 runInfo">
                    <div id="online"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-6 runInfo">在线</div>
                        <div class="col-md-6 runInfo">离线</div>
                        <div class="col-md-6 runInfo"><span id="onlineData"></span></div>
                        <div class="col-md-6 runInfo"><span id="offLineData"></span></div>
                    </div>
                </div>
                <div class="col-md-4 runInfo">
                    <div id="device"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-6 runInfo">运行数</div>
                        <div class="col-md-6 runInfo">待机数</div>
                        <div class="col-md-6 runInfo"><span id="runData"></span></div>
                        <div class="col-md-6 runInfo"><span id="waitData"></span></div>
                    </div>
                </div>
                <div class="col-md-4 runInfo">
                    <div id="warn"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-6 runInfo">报警</div>
                        <div class="col-md-6 runInfo">正常</div>
                        <div class="col-md-6 runInfo"><span id="warnData"></span></div>
                        <div class="col-md-6 runInfo"><span id="normalData"></span></div>
                    </div>
                </div>
            </div>
            <div class="subTitle titleThree">绿色消纳</div>
            <div class="dataDiv dataThree " style="padding-top: 20px">
                <div class="col-md-4" id="dayData">
                </div>
                <div class="col-md-4" id="monthData">
                </div>
                <div class="col-md-4" id="yearData">
                </div>
            </div>
        </div>
        <!--地图数据-->
        <div class="col-md-6 mapDiv mt15" style="background-color: #fff">
            <div id="allmap"></div>
            <div style="width: 350px;height: 60px;position: absolute;background: red;top: 10px;left: 10px;display: flex;background-color: rgba(21,53,76,0.8)">
                <div>
                    <img src="../images/normal.png" style="width: 50px;height: 60px"><span style="color: white">正常项目</span>
                </div>
                <div>
                    <img src="../images/warn.png" style="width: 50px;height: 60px"><span style="color: white">告警项目</span>
                </div>
                <div>
                    <img src="../images/offline.png" style="width: 50px;height: 60px"><span style="color: white">离线项目</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="subTitle titleOne">用户类别</div>
            <div class="dataDiv dataOne divRoll" id="news" style="padding-left: 5px;padding-right: 5px;overflow:hidden;cursor: pointer;">
                <div id="tableTitle" class="userTable" style="display:flex;width: 100%">
                    <div style="color: rgb(32, 234, 248);width: 40%;text-align: center;font-size: 16px">【项目名称】</div>
                    <div style="color: rgb(32, 234, 248);width: 30%;text-align: center;font-size: 16px">【面积 m&sup2;】</div>
                    <div style="color: rgb(32, 234, 248);width: 30%;text-align: center;font-size: 16px">机组编号</div>
                </div>
                <div style="width: 100%;overflow: hidden" id="box">
                    <ul id="userTable" class="userTable ulRoll" style="display:block;width: 100%">
                    </ul>
                </div>

            </div>
            <div class="subTitle titleTwo">监控中心</div>
            <div class="dataDiv dataTwo ">
                <div class="col-md-3 runInfo">
                    <div id="inner"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-12 runInfo">室内</div>
                        <div class="col-md-12 runInfo">温度</div>
                    </div>
                </div>
                <div class="col-md-3 runInfo">
                    <div id="outer"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-12 runInfo">室外</div>
                        <div class="col-md-12 runInfo">温度</div>
                    </div>
                </div>
                <div class="col-md-3 runInfo">
                    <div id="output"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-12 runInfo">出水</div>
                        <div class="col-md-12 runInfo">温度</div>
                    </div>
                </div>
                <div class="col-md-3 runInfo">
                    <div id="input"></div>
                    <div class="text-center colorWhite runInfoText">
                        <div class="col-md-12 runInfo">回水</div>
                        <div class="col-md-12 runInfo">温度</div>
                    </div>
                </div>
            </div>
            <div class="subTitle titleThree">减排贡献</div>
            <div class="dataDiv dataThree ">
                <div class="col-md-6 contribution mt15">
                    <div class="contributionDiv">
                        <div class="col-md-12 colorWhite contributionText">CO<sub>2</sub>减排</div>
                        <div class="col-md-12 contributionText" style="color:#F6B6FF;"><span id="ccers" class="contributionData"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 contribution mt15">
                    <div class="contributionDiv">
                        <div class="col-md-12 colorWhite contributionText">节约标煤</div>
                        <div class="col-md-12 contributionText" style="color:#9BE1FC;">
                            <span id="coalSave" class="contributionData"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 contribution" style="margin-top: 20px">
                    <div class="contributionDiv">
                        <div class="col-md-12 colorWhite contributionText">绿化贡献</div>
                        <div class="col-md-12 contributionText" style="color: #20F996"><span id="greenSpace" class="contributionData"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="col-md-10 col-md-offset-1 bottomLine" style="margin-top: -5px">
            <img src="../images/bottomLine.png" class=" width100">
        </div>
</div>
<script src="../js/jquery/jquery.min.js"></script>
<script src="../js/echart/echart.js"></script>
<script src="../js/datatables/datatables.jquery.js"></script>
<script src="../js/datatables/datatables.bootstrap.js"></script>
<script src="../js/basic.js"></script>
<script src="../js/InfoBox.js"></script>
<script>
    var myMap = new Map();
    var token = '';
    // 百度地图API功能
    var map = new BMap.Map("allmap",{mapType:BMAP_HYBRID_MAP});    // 创建Map实例
    map.centerAndZoom("通辽",11);
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_HYBRID_MAP
        ]}));
    map.enableScrollWheelZoom(true);
    var markers = [];
    var r = []
    var q = []
        //百度地图API功能
    $(function () {
        token = getCookie("token_v3");
        // token = '38656db7-8c90-4c0f-9abb-a3c7dd9c2994';
        //绿色消纳
        // initData(token);
        initProjectList(token);
        // //显示数据
        // initUserTable(projectList);
        // showMonitorView(projectList[0]);

        $('.userTable').on('click','li',function (e) {
            var ln = $(this).attr('ln')
            var la = $(this).attr('la')
            var name = $(this).attr('name')
            var area = $(this).attr('area')
            var storage = $(this).attr('storage')
            var projectId =$(this).attr('id')
            var address = $(this).attr('address')
            var onlineStatus = $(this).attr('onlineStatus')
            var alarmStatus = $(this).attr('alarmStatus')
            if(address === undefined){
                address = ''
            }
            addPoint(projectId,ln,la,address,name,area,storage,onlineStatus,alarmStatus);

            $.ajax({
                type: 'get',
                url: '/api/initData',
                data: {
                    token: token,
                    projectId:projectId
                },
                dataType: 'json',
                success: function(res){
                    showDataOverview(res);
                    showMonitorView(res);
                }
            });

            var marker = myMap.get(parseInt(projectId));
            var sContent =
                "<div style=\"width: 330px;height: 250px;background-color: rgba(21,53,76,0.8);padding-top: 25px;margin: 0;\">\n" +
                "    <div style=\"color: white;margin-left: 8%;font-size: 25px;\">"+name+"</div>\n" +
                "    <div style=\"color: #82C8D0;margin-left: 8%;font-size: 20px;margin-top: 15px;\">"+address+"</div>\n" +
                "    <div style=\"display: flex;margin-left: 8%;color: white;margin-top: 20px;\">\n" +
                "        <div style=\"flex:1\">\n" +
                "            <p style=\"font-size: 20px;\">供暖面积</p>\n" +
                "            <span style=\"font-size:30px\">"+area+"<sup>m<sup>2</sup></sup></span>\n" +
                "        </div>\n" +
                "        <div style=\"flex: 1;\">\n" +
                "            <p style=\"font-size: 23px;\">储能功率</p>\n" +
                "            <span style=\"font-size:30px\">"+storage+"<sup>kw</sup></span>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "    <div style=\"text-align: center;margin-top: 15px;\">\n" +
                "        <div style=\"float:right;margin-right:10px;background: #1E85DA;display:inline-block;cursor:pointer;padding: 12px;border-radius: 7px;\">\n" +
                "            <span style=\"color: white;font-size:20px;\">进入项目</span>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "</div>";

            for(var i in q){
                q[i].close();
            }
            for(var i in r){
                r[i].close();
            }

            infoBox = new BMapLib.InfoBox(map,sContent,{
                boxStyle:{
                    opacity: "0.95",
                    background: "#333333",
                    width: "330px",
                    height: "250px"
                },
                closeIconUrl:"http://api0.map.bdimg.com/images/iw_close1d3.gif",
                closeIconMargin: "8px 8px 0 0",
                enableAutoPan: true,
                align: INFOBOX_AT_TOP
            });
            infoBox.open(marker);
            q.push(infoBox)
        });

    })

    function addPoint(pId,ln,la,address,name,area,storage,onlineStatus,alarmStatus){
        var myLink = '"'+"/#ProjectModule/detail/"+pId+'"';
        var sContent =
            "<div style=\"width: 330px;height: 250px;background-color: rgba(21,53,76,0.8);padding-top: 25px;margin: 0;\">\n" +
            "    <div style=\"color: white;margin-left: 8%;font-size: 25px;\">"+name+"</div>\n" +
            "    <div style=\"color: #82C8D0;margin-left: 8%;font-size: 20px;margin-top: 15px;\">"+address+"</div>\n" +
            "    <div style=\"display: flex;margin-left: 8%;color: white;margin-top: 20px;\">\n" +
            "        <div style=\"flex:1\">\n" +
            "            <p style=\"font-size: 20px;\">供暖面积</p>\n" +
            "            <span style=\"font-size:30px\">"+area+"<sup>m<sup>2</sup></sup></span>\n" +
            "        </div>\n" +
            "        <div style=\"flex: 1;\">\n" +
            "            <p style=\"font-size: 23px;\">储能功率</p>\n" +
            "            <span style=\"font-size:30px\">"+storage+"<sup>kw</sup></span>\n" +
            "        </div>\n" +
            "    </div>\n" +
            "    <div style=\"float:right;margin-right:10px;margin-top: 15px;\">\n" +
            "        <div style=\"float:right;margin-right:10px;background: #1E85DA;display:inline-block;cursor:pointer;padding: 12px;border-radius: 7px;\">\n" +
            "            <span onclick=jump("+myLink+") style=\"color: white;font-size:20px;\">进入项目</span>\n" +
            "        </div>\n" +
            "    </div>\n" +
            "</div>";

        //设置新图标
        var myIcon;
        if(onlineStatus === 0){
            myIcon = new BMap.Icon("../images/icon_off.png", new BMap.Size(40,40));
        }else{
            if(alarmStatus === 1){
                myIcon = new BMap.Icon("../images/icon_w.png", new BMap.Size(40,40));
            }else{
                myIcon = new BMap.Icon("../images/icon_n.png", new BMap.Size(40,40));
            }
        }

        var point = new BMap.Point(ln, la);
        var marker = new BMap.Marker(point,{icon:myIcon});
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

        var infoBox = new BMapLib.InfoBox(map,sContent,{
            boxStyle:{
                opacity: "0.95",
                background: "#333333",
                width: "330px",
                height: "250px"
            },
            closeIconUrl:"http://api0.map.bdimg.com/images/iw_close1d3.gif",
            closeIconMargin: "8px 8px 0 0",
            enableAutoPan: true,
            align: INFOBOX_AT_TOP
        });

        r.push(infoBox);

        map.centerAndZoom(point, 11);
        map.addOverlay(marker);
        marker.addEventListener("click", function(){
            for(var i in q){
                q[i].close();
            }
            for(var j in r){
                r[j].close();
            }
            infoBox.open(marker);
        });
        myMap.set(pId,marker);
        markers.push(marker);
    }

    function jump(link) {
        event.stopPropagation();
        var hostName = window.location.hostname
        var defaultUrl = "http://"+hostName + ":" + 8080 + "/#ProjectModule"
        var linkUrl = "http://"+hostName + ":" + 8080 + link
        window.parent.location.href = defaultUrl;
        window.parent.location.href = linkUrl;
    }

    function displayTable(projects){
        var $ul = $('#userTable');
        for (var i = 0; i < projects.length; i++) {
            var name = projects[i].name;
            var HeatArea = projects[i].HeatArea;
            var serialNumber = projects[i].serialNumber;
            var id = projects[i].id;
            var la = projects[i].latitude;
            var ln = projects[i].longitude;
            var name = projects[i].name;
            var area = projects[i].HeatArea;
            var storage = projects[i].EnergyStorage;
            var onlineStatus = projects[i].onlineStatus;
            var alarmStatus = projects[i].alarmStatus;

            var $li = $("<li style=\"display: flex\" id=\'"+id+"\' ln=\'"+ln+"\' la=\'"+la+"\' name=\'"+name+"\' area=\'"+area+"\' storage=\'"+storage+"\' onlineStatus=\'"+onlineStatus+"\' alarmStatus=\'"+alarmStatus+"\'>\n" +
                "                        <div class=\"li2\">"+name+"</div>\n" +
                "                        <div class=\"li1\">"+HeatArea+"</div>\n" +
                "                        <div class=\"li1\">"+serialNumber+"</div>\n" +
                "                    </li>");
            $ul.append($li);
        }
        var height = $(".dataDiv").height()-40;
        $('#userTable').css('height',height);
    }

    //获取项目列表
    function initData(token){
        $.ajax({
            type: 'get',
            url: '/api/initData',
            data: {
                token: token
            },
            dataType: 'json',
            success: function(res){
                showDataOverview(res);
                showMonitorView(res);
                //showGreenView(res);
            }
        })
    }

    //减排贡献
    function showDataOverview(dataitem){
        // $("#ccers").html(dataitem.dataView.CCERS+"<sup>kt</sup>");
        // $("#coalSave").html(dataitem.dataView.CoalSave+"<sup>kt</sup>");
        // $("#greenSpace").html(dataitem.dataView.GreenSpace+"<sup>亿株</sup>");
    }

    //获取项目列表
    function initProjectList(token){
        $.ajax({
            type: 'get',
            url: '/api/getProjectsList',
            data: {
                token: token
            },
            dataType: 'json',
            success: function(res){
                var userData = res.data;
                $("#subFourData").html(res.data.length+"个")
                for(var i in userData){
                    var onlineStatus =userData[i].onlineStatus;
                    var alarmStatus =userData[i].alarmStatus;
                    addPoint(userData[i].id,userData[i].longitude,userData[i].latitude,userData[i].address,userData[i].name,userData[i].HeatArea,userData[i].EnergyStorage,onlineStatus,alarmStatus);
                    if(i == 1){
                        initData(token);
                    }
                }
                //jiangzhiwei
                displayTable(userData);
                //显示供暖站个数和供热机组数
                // $("#subTwoData").html(res.totalEnergyStorage+"<sup>kw</sup>");
                // $("#subOneData").html(res.totalEnergyCapacity+"<sup>kw</sup>");
                // $("#subThreeData").html(res.totalHeatArea+"<sup>m&sup2</sup>");
                // $("#subFourData").html(res.heatNum+"<sup>个</sup>");
                // $("#subFiveData").html(res.vDeviceItemsNum+"<sup>个</sup>");

                $("#subTwoData").html("148.05MWh");
                $("#subOneData").html("16.45MW");
                $("#subThreeData").html("16.554万m&sup2");
                $("#subFourData").html("29个");
                $("#subFiveData").html("31台");
                //减排贡献
                $("#ccers").html(res.totalCO2+"<sup>kt</sup>");
                $("#coalSave").html(res.totalCoalSave+"<sup>kt</sup>");
                $("#greenSpace").html(res.totalGreenSpace+"<sup>亿株</sup>");
                //运维信息
                onlineData(res.onlineCount,res.offlineCount);
                deviceData(res.runCount, res.standbyCount);
                warnData(res.alarmProjectCount, res.nomalProjectCount);
                //initUserTable(userData);
                //绿色收纳
                showGreenView(res);
                console.log(markers);
            }
        })
    }

    //获取项目列表
    function initGreenInfo(dataitem){
        $.ajax({
            type: 'get',
            url: '/api/getProjectCurrentItemData',
            data: {
                token: token,
                projectId:dataitem.id
            },
            dataType: 'json',
            success: function(res){
                console.log('绿色消纳');
                console.log(res);
            }
        });
    }

    //获取运维信息
    function initMaintenInfo(dataitem){
        $.ajax({
            type: 'get',
            url: '/api/getVdevicesItems',
            data: {
                token: token,
                projectId:dataitem.id
            },
            dataType: 'json',
            success: function(res){
                console.log(res);
            }
        });
    }

    function showMonitorView(dataitem){
        //监控中心 响应式适配1920*1080 100%模式
        var topSize = '30%';
        var fontSize = 14;
        if ($(window).height() > 900) {
            topSize = '35%';
            fontSize = 18;
        }
        innerData(dataitem.monitorView.oottemp, topSize, fontSize);
        outerData(dataitem.monitorView.W_TEM, topSize, fontSize);
        outputData(dataitem.monitorView.S_TEM, topSize, fontSize);
        inputData(dataitem.monitorView.H_TEM, topSize, fontSize);
    }

    function showGreenView(res) {
        var dayData = res.totaltoday;
        var monthData = res.totalmonth;
        var yearData = res.totalyear;
        initDayData(dayData, yearData);
        initMonthData(monthData, yearData);
        initYearData(yearData);
        // //实例化用户类别
        // initUserTable(res);
    }

    //运维信息
    function onlineData(online, offline) {
        $("#onlineData").html(online);
        $("#offLineData").html(offline);
        var data = [{value: online, name: '在线'}, {value: offline, name: '离线'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += data[i].value;
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#online").get(0));
        var option = {
            title: {
                text: online,
                subtext: '在线总数',
                left: 'center',
                top: '22%',
                textStyle: {
                    color: '#fff',
                    fontSize: 25,
                    align: 'center'
                },
                subtextStyle: {
                    color: '#fff',
                    lineHeight: '-15'
                }
            },
            series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#14E38C", "#546F8F"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    function deviceData(run, wait) {
        var allDevice = run + wait;
        $("#runData").html(run);
        $("#waitData").html(wait);
        var data = [{value: run, name: '运行数'}, {value: wait, name: '待机数'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += data[i].value;
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#device").get(0));
        var option = {
            title: {
                text: allDevice,
                subtext: '设备总数',
                left: 'center',
                top: '22%',
                textStyle: {
                    color: '#fff',
                    fontSize: 25,
                    align: 'center'
                },
                subtextStyle: {
                    color: '#fff',
                    lineHeight: '-15'
                }
            }, series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#6AD5F5", "#475F81"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    function warnData(warn, normal) {
        $("#warnData").html(warn);
        $("#normalData").html(normal);
        var data = [{value: warn, name: '报警'}, {value: normal, name: '正常'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += data[i].value;
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#warn").get(0));
        var option = {
            title: {
                text: warn,
                subtext: '报警总数',
                left: 'center',
                top: '22%',
                textStyle: {
                    color: '#fff',
                    fontSize: 25,
                    align: 'center'
                },
                subtextStyle: {
                    color: '#fff',
                    lineHeight: '-15'
                }
            }, series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#F92416", "#546F8F"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    //绿色消纳
    function initDayData(dayData, yearData) {
        dayData = Math.round(dayData * 10) / 10;
        var chart = echarts.init($("#dayData").get(0));
        var option = {
            backgroundColor: '#16487C',
            title: {
                text: dayData + 'kwh',
                textStyle: {
                    color: '#fff',
                    fontSize: '13'
                },
                left: 'center'
            },
            color: ['#2CCEE1'],
            tooltip: {
                show: false
            },
            grid: {
                bottom: '35px',
                // containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [{
                        value: '当日消纳',
                        textStyle: {
                            fontSize: '15',
                            color: '#fff'
                        }
                    }],
                    axisTick: {
                        alignWithLabel: true,
                        show: false
                    }, axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false,
                    max: yearData
                }
            ],
            series: [
                {
                    type: 'bar',
                    barWidth: '30',
                    data: [dayData]
                }
            ]
        };
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    function initMonthData(monthData, yearData) {
        monthData = Math.round(monthData * 10) / 10;
        var chart = echarts.init($("#monthData").get(0));
        var option = {
            backgroundColor: '#16487C',
            title: {
                text: monthData + 'kwh',
                textStyle: {
                    color: '#fff',
                    fontSize: '13'
                },
                left: 'center'
            },
            color: ['#2CCEE1'],
            tooltip: {
                show: false
            },
            grid: {
                bottom: '35px',
                // containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [{
                        value: '当月消纳',
                        textStyle: {
                            fontSize: '15',
                            color: '#fff'
                        }
                    }],
                    axisTick: {
                        alignWithLabel: true,
                        show: false
                    }, axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false,
                    max: yearData
                }
            ],
            series: [
                {
                    type: 'bar',
                    barWidth: '30',
                    data: [monthData]
                }
            ]
        };
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    function initYearData(yearData) {
        yearData = Math.round(yearData * 10) / 10;
        var chart = echarts.init($("#yearData").get(0));
        var option = {
            backgroundColor: '#16487C',
            title: {
                text: yearData + 'kwh',
                textStyle: {
                    color: '#fff',
                    fontSize: '13'
                },
                left: 'center'
            },
            color: ['#2CCEE1'],
            tooltip: {
                show: false
            },
            grid: {
                bottom: '35px',
                // containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [{
                        value: '当年消纳',
                        textStyle: {
                            fontSize: '15',
                            color: '#fff'
                        }
                    }],
                    axisTick: {
                        alignWithLabel: true,
                        show: false
                    }, axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false,
                    max: yearData
                }
            ],
            series: [
                {
                    type: 'bar',
                    barWidth: '30',
                    data: [yearData]
                }
            ]
        };
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    // //用户类别
    // function initUserTable(userData) {
    //     var height = $(".dataDiv").height()-40;
    //     var table = $("#userTable").DataTable({
    //         data: userData,
    //         autoWidth: false,
    //         order: [],
    //         columnDefs: [
    //             {"width": "33%", "targets": 0},
    //             {"width": "33%", "targets": 1},
    //             {"width": "33%", "targets": 2}
    //         ],
    //         paging: false,
    //         lengthChange: false,
    //         searching: false,
    //         destroy: true,
    //         info: false,
    //         scrollY: height,
    //         pageLength: 100,
    //         language: {
    //             url: '../json/chinese.json',
    //         },
    //         columns: [
    //             {
    //                 data: 'name', render: function (data, type, full, meta) {
    //                     var size = 6;
    //                     if ($(window).width() < 1400) {
    //                         size = 5;
    //                     }
    //                     var value = data;
    //                     if (data.length > size) {
    //                         value = data.substring(0, size) + "...";
    //                         value = "<span title=" + data + " >" + value + "</span>";
    //                     } else {
    //                         value = "<span title=" + data + " >" + data + "</span>";
    //                     }
    //                     return value;
    //                 }
    //             },
    //             {data: 'HeatArea'},
    //             {data: 'serialNumber'}
    //         ],
    //     })
    //
    //     $('#userTable tbody').on('mouseover', 'tr', function () {
    //         $.ajax({
    //             type: 'get',
    //             url: '/api/initData',
    //             data: {
    //                 token: token,
    //                 projectId:projectId
    //             },
    //             dataType: 'json',
    //             success: function(res){
    //                 showDataOverview(res);
    //                 showMonitorView(res);
    //             }
    //         });
    //
    //         if (!$(this).hasClass('badao_hoverd') ) {
    //             $(this).addClass('badao_hoverd');
    //             $(this).css('cssText',' background-image: linear-gradient(#19426E, transparent, #19426E) !important');
    //         }
    //     } ).on('mouseleave', 'tr', function () {
    //         if ($(this).hasClass('badao_hoverd') ) {
    //             $(this).removeClass('badao_hoverd');
    //             $(this).css('cssText','background-color:transparent !important');
    //         }
    //     } );
    // }

    $('.userTable').on('mouseover', 'li', function () {
        // $.ajax({
        //     type: 'get',
        //     url: '/api/initData',
        //     data: {
        //         token: token,
        //         projectId:projectId
        //     },
        //     dataType: 'json',
        //     success: function(res){
        //         showDataOverview(res);
        //         showMonitorView(res);
        //     }
        // });
        $(this).addClass('bimg');

        clearInterval(time);
    } ).on('mouseleave', 'li', function () {
        $(this).removeClass('bimg');
        time = setInterval(rollStart, 2000)
    } );

    //室内温度
    function innerData(temperature, topSize, fontSize) {
        var tempData = temperature;
        var data = [{value: tempData, name: '室内'}, {value: 800 - tempData, name: '灰色条'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += Math.abs(data[i].value);
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#inner").get(0));
        var option = {
            title: {
                text: temperature + '℃',
                left: 'center',
                top: topSize,
                textStyle: {
                    color: '#fff',
                    fontSize: fontSize,
                    align: 'center'
                }
            }, series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#14E38C", "#546F8F"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    //室外温度
    function outerData(temperature, topSize, fontSize) {
        var tempData = temperature;
        var data = [{value: tempData, name: '室外温度'}, {value: 800 - tempData, name: '灰色条'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += Math.abs(data[i].value);
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#outer").get(0));
        var option = {
            title: {
                text: temperature + '℃',
                left: 'center',
                top: topSize,
                textStyle: {
                    color: '#fff',
                    fontSize: fontSize,
                    align: 'center'
                }
            }, series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#F92416", "#546F8F"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    //出水温度
    function outputData(temperature, topSize, fontSize) {
        var tempData = temperature;
        var data = [{value: tempData, name: '出水温度'}, {value: 800 - tempData, name: '灰色条'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += Math.abs(data[i].value);
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#output").get(0));
        var option = {
            title: {
                text: temperature + '℃',
                left: 'center',
                top: topSize,
                textStyle: {
                    color: '#fff',
                    fontSize: fontSize,
                    align: 'center'
                }
            }, series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#08A9D7", "#546F8F"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }
    }

    //回水温度
    function inputData(temperature, topSize, fontSize) {
        var tempData = temperature;
        var data = [{value: tempData, name: '回水温度'}, {value: 800 - tempData, name: '灰色条'}];
        var a = 0;
        for (var i = 0; i < data.length; i++) {
            a += Math.abs(data[i].value);
        }
        a = a * 0.3;
        data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
        var chart = echarts.init($("#input").get(0));
        var option = {
            title: {
                text: temperature + '℃',
                left: 'center',
                top: topSize,
                textStyle: {
                    color: '#fff',
                    fontSize: fontSize,
                    align: 'center'
                }
            }, series: [
                {
                    type: 'pie',
                    center: ["50%", "42%"],
                    radius: ['75%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    silent: true,
                    startAngle: 230,
                    // clockwise:false,
                    itemStyle: {
                        borderWidth: 1, //设置border的宽度有多大
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: data
                }
            ],
            color: ["#07E292", "#546F8F"]
        };
        ;
        if (option && typeof option === "object") {
            chart.setOption(option, true);
        }

        $("#enter").click(function(){
            window.parent.location.replace('http://123.57.29.122:8080/#ProjectModule');
        })
    }

    function getCookie(c_name){
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if (c_end == -1)
                    c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start,
                    c_end));
            }
        }
        return "";
    }

    var time = setInterval(function () {
        rollStart();
    }, 2000)

    function rollStart() {
        var li = $(".divRoll>#box>.ulRoll>li:eq(0)").clone();
        $(".divRoll>#box>.ulRoll").animate({
            "marginTop": "-36px"
        }, 1000, function () {
            $(".divRoll>#box>.ulRoll>li:eq(0)").remove();
            $(".ulRoll").append(li)
            $(".divRoll>#box>.ulRoll").css({
                "marginTop": 0
            })

        });
    }

</script>
</body>
</html>